<template>
  <div class="score-display" :class="{ 'animated': isAnimating }">
    <div class="score-item current-score">
      <div class="score-label">当前分数</div>
      <div class="score-value" ref="scoreRef">{{ formattedCurrentScore }}</div>
    </div>
    
    <div class="score-item distance">
      <div class="score-label">距离</div>
      <div class="score-value">{{ formattedDistance }}m</div>
    </div>
    
    <div v-if="showHighScore" class="score-item high-score">
      <div class="score-label">最高分</div>
      <div class="score-value">{{ formattedHighScore }}</div>
    </div>

    <!-- 分数增加动画 -->
    <div 
      v-if="scoreIncrement > 0" 
      class="score-increment"
      :class="{ 'show': showIncrement }"
    >
      +{{ scoreIncrement.toLocaleString() }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch, nextTick } from 'vue'

/**
 * 分数显示组件
 * 显示当前分数、距离和最高分，支持分数增加动画效果
 * @component
 * @example
 * <ScoreDisplay 
 *   :current-score="1000" 
 *   :distance="500" 
 *   :high-score="5000"
 *   :show-high-score="true"
 * />
 */

interface Props {
  /** 当前分数 */
  currentScore?: number
  /** 当前距离 */
  distance?: number
  /** 最高分数 */
  highScore?: number
  /** 是否显示最高分 */
  showHighScore?: boolean
  /** 分数增加动画持续时间（毫秒） */
  animationDuration?: number
}

const props = withDefaults(defineProps<Props>(), {
  currentScore: 0,
  distance: 0,
  highScore: 0,
  showHighScore: true,
  animationDuration: 1000
})

// 响应式数据
const scoreRef = ref<HTMLElement>()
const isAnimating = ref(false)
const scoreIncrement = ref(0)
const showIncrement = ref(false)
const previousScore = ref(props.currentScore)

// 计算属性
const formattedCurrentScore = computed(() => {
  return props.currentScore.toLocaleString()
})

const formattedDistance = computed(() => {
  return Math.floor(props.distance).toLocaleString()
})

const formattedHighScore = computed(() => {
  return props.highScore.toLocaleString()
})

/**
 * 播放分数增加动画
 * @param increment - 增加的分数
 */
const playScoreAnimation = (increment: number): void => {
  if (increment <= 0) return

  scoreIncrement.value = increment
  isAnimating.value = true
  
  // 显示增加动画
  nextTick(() => {
    showIncrement.value = true
    
    // 添加分数闪烁效果
    if (scoreRef.value) {
      scoreRef.value.classList.add('score-flash')
    }
    
    // 动画结束后清理
    setTimeout(() => {
      showIncrement.value = false
      isAnimating.value = false
      scoreIncrement.value = 0
      
      if (scoreRef.value) {
        scoreRef.value.classList.remove('score-flash')
      }
    }, props.animationDuration)
  })
}

// 监听分数变化
watch(() => props.currentScore, (newScore, oldScore) => {
  const increment = newScore - (oldScore || 0)
  if (increment > 0) {
    playScoreAnimation(increment)
  }
  previousScore.value = newScore
}, { immediate: false })
</script>

<style lang="scss" scoped>
.score-display {
  display: flex;
  gap: $spacing-lg;
  align-items: flex-start;
  position: relative;

  .score-item {
    background: rgba(0, 0, 0, 0.8);
    padding: $spacing-sm $spacing-md;
    border-radius: $border-radius-md;
    color: white;
    text-align: center;
    min-width: 100px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: $transition-normal;

    &:hover {
      background: rgba(0, 0, 0, 0.9);
      transform: translateY(-2px);
    }

    .score-label {
      font-size: 0.75rem;
      opacity: 0.8;
      margin-bottom: $spacing-xs;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .score-value {
      font-size: 1.25rem;
      font-weight: bold;
      font-family: 'Courier New', monospace;
      transition: $transition-fast;

      &.score-flash {
        animation: scoreFlash 0.3s ease-in-out;
      }
    }

    &.current-score {
      .score-value {
        color: $success-color;
      }
    }

    &.distance {
      .score-value {
        color: $secondary-color;
      }
    }

    &.high-score {
      .score-value {
        color: $accent-color;
      }
    }
  }

  .score-increment {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: $success-color;
    color: white;
    padding: $spacing-xs $spacing-sm;
    border-radius: $border-radius-sm;
    font-size: 0.875rem;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;

    &.show {
      opacity: 1;
      animation: scoreIncrement 1s ease-out forwards;
    }
  }

  &.animated {
    .current-score {
      animation: scoreGlow 0.5s ease-in-out;
    }
  }
}

// 动画定义
@keyframes scoreFlash {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    color: $accent-color;
  }
}

@keyframes scoreIncrement {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-30px);
  }
}

@keyframes scoreGlow {
  0%, 100% {
    box-shadow: 0 0 0 rgba($success-color, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba($success-color, 0.6);
  }
}

// 响应式设计
@media (max-width: $breakpoint-md) {
  .score-display {
    gap: $spacing-sm;
    
    .score-item {
      min-width: 80px;
      padding: $spacing-xs $spacing-sm;
      
      .score-label {
        font-size: 0.625rem;
      }
      
      .score-value {
        font-size: 1rem;
      }
    }
  }
}

@media (max-width: $breakpoint-sm) {
  .score-display {
    flex-direction: column;
    gap: $spacing-xs;
    
    .score-item {
      min-width: 60px;
    }
  }
}
</style>